<template>
  <div class="flex-wrap">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-row>
        <el-col :span="8"> 订单编号:{{ info.orderCode }} </el-col>
        <el-col :span="8"> 支付时间:{{ info.payTime }} </el-col>
        <el-col :span="8"> 支付方式:{{ payType.names[info.payType] }} </el-col>
      </el-row>
      <h1 class="fontBolder" style="margin: 20px 0" v-if="info.expireTime">
        支付超时
      </h1>
      <p v-if="info.expireTime">用户超时未支付，订单自动关闭</p>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card">
      <h2 class="fontBolder mg20">订单信息</h2>
      <el-row class="mg20">
        <el-col :span="8"> 订单类型:{{ info.orderType }} </el-col>
        <el-col :span="8"> 商品名称:{{ info.commodityName }} </el-col>
        <el-col :span="8"> 商品规则:{{ info.orderSpecification }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8"> 订单金额:{{ info.orderLines }} </el-col>
        <el-col :span="8"> 订单来源:{{ info.orderSource }} </el-col>
        <el-col :span="8"> 当前状态:{{ info.status }} </el-col>
      </el-row>
      <el-row>
        <el-col :span="8"> 支付时间:{{ info.payTime }} </el-col>
        <el-col :span="8"> 失效时间:{{ info.expireTime }} </el-col>
        <el-col :span="8"> 交易流水:{{}} </el-col>
      </el-row>
      <h2 class="fontBolder mg20">用户信息</h2>
      <el-row>
        <el-col :span="8"> 用户名:{{}} </el-col>
        <el-col :span="8"> 手机号码:{{}} </el-col>
      </el-row>
      <h2 class="fontBolder" style="text-align: end; margin-right: 20px">
        实际支付金额：{{}}
      </h2>
    </el-card>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { useRoute } from 'vue-router';
import { getOrderDetail } from '@/api/order';
import { useDictStore } from '@/store/dict';

const dictStore = useDictStore();
const { payType, online } = dictStore;

const route = useRoute();
// 查询参数
const info = reactive({});

// 查询用户列表
const getList = () => {
  getOrderDetail(route.query.orderCode).then((data) => {
    Object.assign(info, data);
  });
};
</script>

<style lang="less" scoped>
.search-card,
.table-card {
  margin-bottom: 20px;

  .el-card__header {
    padding: 15px 20px;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-buttons {
    display: flex;
    gap: 10px;
  }
}
.el-row {
  margin: 30px 0;
}
</style>
